<html lang="en"><head>
    <meta charset="UTF-8">

    <meta name="apple-mobile-web-app-title" content="CodePen">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>xxxxx</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.8/typicons.min.css">
</head>
<body translate="no">
<!-- Header Section
–––––––––––––––––––––––––––––––––––––––––––––––––– -->

<header id="header">
    <div class="main_nav">
        <div class="container">
            <div class="mobile-toggle"> <span></span> <span></span> <span></span> </div>
            <nav>
                <ul>
                    <li><a class="smoothscroll" href="#header">Home</a></li>
                    <li><a class="smoothscroll" href="#about">About</a></li>
                    <li><a class="smoothscroll" href="#skills">Services</a></li>
                    <li><a class="smoothscroll" href="#portfolio">Work</a></li>
                    <li><a class="smoothscroll" href="#contact">Contact</a></li>
                </ul>
            </nav>
        </div>
    </div>
    <div class="title">
        <div><span class="typcn typcn-heart-outline icon heading"></span></div>
        <div class="smallsep heading"></div>
        <h1 class="heading"> Clean & Simple</h1>
        <h2 class="heading">Lorem ipsum dolor sit amet</h2>
        <a class="smoothscroll" href="#about">
            <div class="mouse">
                <div class="wheel"></div>
            </div>
        </a> </div>
    <a class="smoothscroll" href="#about">
        <div class="scroll-down"></div>
    </a> </header>

<!-- About Section
–––––––––––––––––––––––––––––––––––––––––––––––––– -->

<section id="about">
    <div class="container">
        <div class="row">
            <h1>About</h1>
            <div class="block"></div>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        </div>
        <div class="row">
            <div class="six columns">
                <h3><span class="typcn typcn-device-desktop icon"></span>Our Process</h3>
                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
            </div>
            <div class="six columns">
                <h3><span class="typcn typcn-pen icon"></span>Our Approach</h3>
                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
            </div>
            <div class="row">
                <div class="six columns">
                    <h3><span class="typcn typcn-cog-outline icon"></span>Our Goal</h3>
                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
                </div>
                <div class="six columns">
                    <h3><span class="typcn typcn-lightbulb icon"></span>Our Mission</h3>
                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Team Section
–––––––––––––––––––––––––––––––––––––––––––––––––– -->

<section id="team">
    <div class="container">
        <div class="row">
            <h1>Meet the Team</h1>
            <div class="block"></div>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        </div>
        <div class="row">
            <div class="three columns"> <img src="http://placehold.it/220x220" width="220" height="220" alt=""/>
                <h4>Naruto Uzumaki</h4>
                <p>Creative Director</p>
                <span class="typcn typcn-social-facebook-circular icon"></span><span class="typcn typcn-social-instagram-circular icon"></span><span class="typcn typcn-social-google-plus-circular icon"></span><span class="typcn typcn-social-linkedin-circular icon"></span> </div>
            <div class="three columns"> <img src="http://placehold.it/220x220" width="220" height="220" alt=""/>
                <h4>Sasuke Uchiha</h4>
                <p>Lead Designer</p>
                <span class="typcn typcn-social-facebook-circular icon"></span><span class="typcn typcn-social-instagram-circular icon"></span><span class="typcn typcn-social-google-plus-circular icon"></span><span class="typcn typcn-social-linkedin-circular icon"></span> </div>
            <div class="three columns"> <img src="http://placehold.it/220x220" width="220" height="220" alt=""/>
                <h4>Shikamaru Nara</h4>
                <p>Designer</p>
                <span class="typcn typcn-social-facebook-circular icon"></span><span class="typcn typcn-social-instagram-circular icon"></span><span class="typcn typcn-social-google-plus-circular icon"></span><span class="typcn typcn-social-linkedin-circular icon"></span> </div>
            <div class="three columns"> <img src="http://placehold.it/220x220" width="220" height="220" alt=""/>
                <h4>Sakura Haruno</h4>
                <p>Designer</p>
                <span class="typcn typcn-social-facebook-circular icon"></span><span class="typcn typcn-social-instagram-circular icon"></span><span class="typcn typcn-social-google-plus-circular icon"></span><span class="typcn typcn-social-linkedin-circular icon"></span> </div>
        </div>
    </div>
</section>

<!-- Skills Section
–––––––––––––––––––––––––––––––––––––––––––––––––– -->

<section id="skills">
    <div class="container">
        <h1>Services</h1>
        <div class="block"></div>
        <div class="row">
            <div class="one-third column">
                <h3>Design</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, recusandae, at, labore velit eligendi amet nobis repellat natus.</p>
            </div>
            <div class="one-third column">
                <h3>Development</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, recusandae, at, labore velit eligendi amet nobis repellat natus.</p>
            </div>
            <div class="one-third column">
                <h3>Marketing</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, recusandae, at, labore velit eligendi amet nobis repellat natus.</p>
            </div>
        </div>
        <div class="row">
            <div class="eight columns">
                <div class="progressBar">
                    <h4>HTML5</h4>
                    <div class="progressBarContainer">
                        <div class="progressBarValue value-90"></div>
                    </div>
                </div>
                <div class="progressBar">
                    <h4>CSS3</h4>
                    <div class="progressBarContainer">
                        <div class="progressBarValue value-80"></div>
                    </div>
                </div>
                <div class="progressBar">
                    <h4>Jquery</h4>
                    <div class="progressBarContainer">
                        <div class="progressBarValue value-30"></div>
                    </div>
                </div>
                <div class="progressBar">
                    <h4>WordPress</h4>
                    <div class="progressBarContainer">
                        <div class="progressBarValue value-70"></div>
                    </div>
                </div>
            </div>
            <div class="four columns">
                <p>Lorem ipsum dolor sit amet, enim soluta consectetur adipisicing elit. Sit, eius, itaque, porro, beatae impedit officia tenetur reiciendis in quia eum autem. Enim soluta consectetur adipisicing elit.</p>
            </div>
        </div>
    </div>
</section>

<!-- Portfolio Section
–––––––––––––––––––––––––––––––––––––––––––––––––– -->

<section id="portfolio">
    <div class="container">
        <h1>Work</h1>
        <div class="block"></div>
        <div class="row">
            <div class="three columns"> <img src="http://placehold.it/220x220" class="image" alt="Work One"/></div>
            <div class="three columns"> <img src="http://placehold.it/220x220" class="image" alt="Work Two"/></div>
            <div class="three columns"> <img src="http://placehold.it/220x220" class="image" alt="Work Three"/></div>
            <div class="three columns"> <img src="http://placehold.it/220x220" class="image" alt="Work Four"/></div>
        </div>
        <div class="row" style="margin-top: 30px;">
            <div class="three columns"> <img src="http://placehold.it/220x220" class="image" alt="Work Five"/></div>
            <div class="three columns"> <img src="http://placehold.it/220x220" class="image" alt="Work Six"/></div>
            <div class="three columns"> <img src="http://placehold.it/220x220" class="image" alt="Work Seven"/></div>
            <div class="three columns"> <img src="http://placehold.it/220x220" class="image" alt="Work Eight"/></div>
        </div>
    </div>
</section>

<!-- Testimonials Section
–––––––––––––––––––––––––––––––––––––––––––––––––– -->

<section id="testimonial">
    <div class="container">
        <div class="quoteLoop">
            <blockquote class="quote"> <img src="http://placehold.it/100x100" width="100" height="100" alt=""/>
                <h5>&nbsp;<br>
                    &rdquo;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&rdquo;<br>
                    <small>Steve Bruce, Sed ut perspiciatis unde omnis</small></h5>
            </blockquote>
            <blockquote class="quote"> <img src="http://placehold.it/100x100" width="100" height="100" alt=""/>
                <h5>&nbsp;<br>
                    &ldquo;Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.&rdquo;<br>
                    <small>Tom Jones, Sed ut perspiciatis unde omnis</small></h5>
            </blockquote>
        </div>
    </div>
</section>

<!-- Contact Section
–––––––––––––––––––––––––––––––––––––––––––––––––– -->

<section id="contact">
    <div class="container">
        <h1>Contact</h1>
        <div class="block"></div>
        <form>
            <div class="row">
                <div class="six columns">
                    <label for="exampleRecipientInput">Name</label>
                    <input class="u-full-width" type="text">
                </div>
                <div class="six columns">
                    <label for="exampleEmailInput">Email</label>
                    <input class="u-full-width" type="email">
                </div>
            </div>
            <div class="row">
                <label for="exampleMessage">Message</label>
                <textarea class="u-full-width"></textarea>
                <input class="button-primary" type="submit" value="Submit">
            </div>
        </form>
    </div>
</section>

<!-- Footer Section
–––––––––––––––––––––––––––––––––––––––––––––––––– -->

<footer>
    <div class="container">
        <div class="nine columns">
            <p>Created with love by Jeff.</p>
        </div>
        <div class="three columns"> <span class="typcn typcn-social-facebook-circular socialIcons"></span> <span class="typcn typcn-social-instagram-circular socialIcons"></span> <span class="typcn typcn-social-google-plus-circular socialIcons"></span> <span class="typcn typcn-social-linkedin-circular socialIcons"></span> </div>
    </div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
</body>
<script src="script.js"></script>
</html>